<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head><title>ife task1</title>
<link rel="stylesheet" href="task_02.css">
</head>
<body>
<h1>网站一级标题</h1>
<header class="mainHeader">
  <img src="1.jpg" alt="icon" />
  <nav class="mainNav">
     <ul>
        <li><a href="#">导航链接一</a></li>
        <li><a href="#">导航链接二</a></li>
        <li><a href="#">导航链接三</a></li>
        <li><a href="#">导航链接四</a></li>
     </ul>
  </nav>  
</header>

<article>
<h2>文章一级标题</h2>
<h2>文章二级标题</h2>
<p>
<span>文章作者</span>
<span>文章发表时间</span>
</p>
<p>这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，<br />
换行了<br />
这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，换行了<br />
这是一个很长的故事，这是一个很长的故事，<a href="http://www.baidu.com">这里有一个链接转到百度</a>这是一个很长的故事，这是一个很长的故事，
<strong>这里有个粗体字</strong>这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事。
</p>
<img src="1.jpg" title="这是照片" />
<h2>另一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>
   <span>文章作者</span>
   <span>文章发表时间</span>
</p>
<p>这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，<br />
这是一个很长的故事，换行了<br />
这是一个很长的故事，这是一个很长的故事，<strong>这里有一个粗体字</strong>这是一个很长的故事，这是一个很长的故事，<a href="http://www.baidu.com target="_blank">这里有一个链接点击后链接到新窗口链接到百度</a>这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，<strong>这里有一个粗体字</strong>这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事，这是一个很长的故事.</p>
</article>
<img src="1.jpg" title="这是照片" />
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
</ul>
<h2>图片</h2>
<figure> 
        <figcaption>好看的照片</figcaption>
        <img src="1.jpg" width="100" heigth="180">
        <figcaption>好看的照片</figcaption>
        <img src="1.jpg" width="100" heigth="180">
        <figcaption>好看的照片</figcaption>
        <img src="1.jpg" width="100" heigth="180">
        <figcaption>好看的照片</figcaption>
        <img src="1.jpg" width="100" heigth="180">
</figure>
<article>
<h2>最后一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p><span>文章作者</span>
   <span>文章发表时间</span>
</p>
</article>
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
下面是一个表格，给表格加一个border="1"好让你看出是一个表格
<table border="1">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tr>
<tbody>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>总计</td>
<td colspan="2">1000</td>
</tr>
</tbody>
</table>
<aside>
<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
<h2>侧栏注册窗口标题</h2>
<form  method="post" action="save.php">
<table>
<tbody>
<tr>
    <td><label for="address">请输入邮箱地址：</label></td>
    <td><input type="text" id="address" placeholder="这是一个文本输入框" /></td>
</tr>
<tr>
    <td>邮箱地址请按要求格式输入</td>
</tr>
<tr>
    <td><label for="pa1">请输入密码：</label></td>
    <td><input type="text" id="pa1" placeholder="这是一个文本输入框" /></td>
</tr>
<tr>
    <td><label for="pa2">请重复输入密码：</label></td>
    <td><input type="text" id="pa2" placeholder="这是一个文本输入框" /></td>
</tr>
<tr>
    <td>密码请为6-16位英文数字</td>
</tr>
<tr>
    <td>性别：</td>
    <td><label><input type="radio" value="1" name="radio" checked />男</label><label><input type="radio" value="2" name="radio">女</label></td>
</tr>
<tr>
    <td><label for="city">城市：</label></td>
    <td>
    <select id="city">
            <option value="上海">上海</option>
            <option value="北京" selected>北京</option>
            <option value="深圳">深圳</option>
            <option value="成都">成都</option>
    </select>
    </td>
</tr>
<tr>
    <td>爱好：</td>
    <td><label><input type="checkbox" name="checkbox1" value="运动" />运动</label><label><input type="checkbox" name="checkbox2" value="艺术" />艺术</label><label><input type="checkbox" name="checkbox1" value="科学" />科学</label></td>
</tr>
<tr>
    <td><label for="mul">个人描述：</label></td>
    <td><textarea id="mul" cols="60" rows="5" placeholder="这是一个多行输入框，输入你的个人描述"></textarea></td>
</tr>
<tr>
    <td><input type="submit" value="确认提交" name="submit"></td>
</tr>
</tbody>
</table>
</form>
<span>版权所有&copy;海尔塞拉西</span>
</aside>
</body>
</html>